{% extends "base.html" %}

{% block content %}
<div class="card">
    <h2><i class="fas fa-procedures"></i> 虚拟病例练习</h2>
    <p>通过模拟真实临床病例，提升您的诊断和决策能力。</p>
    
    <div class="case-container">
        <div class="case-section">
            <h3>病例信息</h3>
            <p>{{ case.patient_info }}</p>
        </div>
        
        <div class="case-section">
            <h3>主诉</h3>
            <p>{{ case.chief_complaint }}</p>
        </div>
        
        <div class="case-section">
            <h3>病史</h3>
            <p>{{ case.history }}</p>
        </div>
        
        <div class="case-section">
            <h3>体格检查</h3>
            <p>{{ case.physical_exam }}</p>
        </div>
        
        <div class="case-section" id="diagnosis-section" style="display: none;">
            <h3>初步诊断</h3>
            <p>{{ case.diagnosis }}</p>
        </div>
        
        <div class="case-section" id="management-section" style="display: none;">
            <h3>治疗方案</h3>
            <p>{{ case.management }}</p>
        </div>
        
        <div class="case-section">
            <button class="btn" id="show-diagnosis-btn">显示诊断</button>
            <button class="btn" id="show-management-btn">显示治疗方案</button>
            <button class="btn" onclick="window.location.href='/cases'">随机新病例</button>
        </div>
    </div>
</div>

<script>
document.getElementById('show-diagnosis-btn').addEventListener('click', function() {
    document.getElementById('diagnosis-section').style.display = 'block';
});

document.getElementById('show-management-btn').addEventListener('click', function() {
    document.getElementById('management-section').style.display = 'block';
});
</script>
{% endblock %}